<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Free Templates with jQuery Slider</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<link rel="shortcut icon" href="css/images/favicon.ico" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/prettyCheckboxes.css" type="text/css" media="all" />
	<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
	<script src="js/jquery.jcarousel.js" type="text/javascript"></script>
	<script src="js/prettyCheckboxes.js" type="text/javascript"></script>
	<script src="js/DD_belatedPNG-min.js" type="text/javascript"></script>
	<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<!-- Main  -->
		<div id="main">
			<!-- Slider -->
			<div id="slider-holder">				
				<div id="slider">
					<ul>
						<li>
							<img src="css/images/slide1.png" alt="Beautiful white case with flowers" />
							<div class="caption">
								<p>For Real Gamers</p>
								<p class="model">Lian-Li PC-7FW Midi Tower</p>
								<a title="Buy Now!" class="buy-now" href="#">buy now!</a>
							</div>							
						</li>
						<li>
							<img src="css/images/slide2.png" alt="Computer case with cartoon characters" />
							<div class="caption">
								<p>For Gamers</p>
								<p class="model">Lian-Li PC-7FW Tower</p>
								<a title="Buy Now!" class="buy-now" href="#">buy now!</a>
							</div>							
						</li>
						<li>
							<img src="css/images/slide1.png" alt="Beautiful white case with flowers" />
							<div class="caption">
								<p>For Real Gamers</p>
								<p class="model">Gamers PC-7FW Midi Tower</p>
								<a title="Buy Now!" class="buy-now" href="#">buy now!</a>
							</div>							
						</li>
						<li>
							<img src="css/images/slide2.png" alt="Computer case with cartoon characters" />
							<div class="caption">
								<p>For Fun</p>
								<p class="model">Lian-Li PC-7FW Midi Tower</p>
								<a title="Buy Now!" class="buy-now" href="#">buy now!</a>
							</div>							
						</li>
						<li>
							<img src="css/images/slide1.png" alt="Beautiful white case with flowers" />
							<div class="caption">
								<p>For Work</p>
								<p class="model">Lian-Li PC-7FW Midi Tower</p>
								<a title="Buy Now!" class="buy-now" href="#">buy now!</a>
							</div>							
						</li>						
					</ul>
					<div class="slider-controls">
						<a title="slide 1" href="#">1</a>
						<a title="slide 2" href="#">2</a>
						<a title="slide 3" href="#">3</a>
						<a title="slide 4" href="#">4</a>
						<a title="slide 5" href="#">5</a>							
					</div>
					<a title="Previous Slide" id="prev" href="#">prev</a>
					<a title="Next Slide" id="next" href="#">next</a>
				</div>
			</div>
			<!-- END Slider -->
			<!-- Content -->
			<div id="content">				
				<div class="post">
					<h2>Welcome to MEGAStore</h2>
					<p><strong>Proin hendrerit vehicula cursus.</strong> In tempor metus eget magna varius sagittis et ac nisi. Vestibulum massa nisl, tincidunt at sodales a, adipiscing iaculis nunc. Sed rutrum justo vitae sem aliquet bibendum. <strong>Quisque vestibulum, velit ut cursus blandit, orci quam adipiscing arcu, a ultricies felis urna sed risus. Etiam in dolor eu massa sodales faucibus non et purus.</strong> Nam facilisis aliquet adipiscing. Maecenas ligula mi, porttitor faucibus imperdiet eu, porta nec urna. In vel ligula quam. </p>
					<p>Proin in nunc nibh, in suscipit enim. Nunc fermentum metus ut diam faucibus rhoncus. Duis augue sapien, pharetra sit amet mollis at, luctus ut eros.</p>
				</div>
			</div>
			<!-- ЕND Content  -->
			<!-- Sidebar -->
			<div id="sidebar">
				<div class="box">
					<h2>Quick Links</h2>
					<ul>
						<li><a title="Aenean" href="#">Aenean</a></li>
						<li><a title="Suspendisse" href="#">Suspendisse</a></li>
						<li><a title="Pellentesque" href="#">Pellentesque</a></li>
						<li><a title="Mauris" href="#">Mauris</a></li>
						<li><a title="semper nec faucibus" href="#">semper nec faucibus</a></li>
						<li><a title="vel ultrices" href="#">vel ultrices</a></li>
					</ul>
				</div>
			</div>	
			<!-- END Sidebar -->
			<div class="cl"></div>
			<!-- Latest Products -->
			<div class="products">
				<h2>Latest Products</h2>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case1.jpg" alt="Black and red stylish computer case" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case2.jpg" alt="Beautiful white case with flower motives" /></a>
						<img class="sale-label" src="css/images/sale-label.png" alt="Sale!" />							
						<p>Case Model</p>													
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>	
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case3.jpg" alt="Black and white gamers computer case" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case4.jpg" alt="Transformers computer case" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case1.jpg" alt="Black and red stylish computer case" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case2.jpg" alt="Beautoful white case with flower motives" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case3.jpg" alt="Black and white gamers computer case" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case4.jpg" alt="Transformers computer case" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div><div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case1.jpg" alt="Black and red stylish computer case" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case2.jpg" alt="Beautoful white case with flower motives" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case3.jpg" alt="Black and white gamers computer case" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="product-holder">
					<div class="product">
						<a title="Details" href="#"><img src="css/images/case4.jpg" alt="Transformers computer case" /></a>
						<p>Case Model</p>							
					</div>
					<p>Product 20</p>
					<div class="price-label">
						<strike>$117.50</strike>
						<p class="price">£96.<sup>35</sup></p>
					</div>
				</div>
				<div class="cl"></div>
			</div>
			<!-- END Latest Products -->
			<!-- Feartured Products -->
			<div class="products featured">
				<h2>Featured Products</h2>
				<div class="products-slider">
					<ul>
						<li>
							<a title="Details" href="#"><img src="css/images/1.jpg" alt="Silver half transparent with blue lights computer case" /></a>
							<p>Model Name</p>
						</li>
						<li>
							<a title="Details" href="#"><img src="css/images/2.jpg" alt="Solid brown computer case" /></a>
							<p>Model Name</p>
						</li>
						<li>
							<a title="Details" href="#"><img src="css/images/3.jpg" alt="Computer case with a fan on the side and blue lights" /></a>
							<p>Model Name</p>
						</li>
						<li>
							<a title="Details" href="#"><img src="css/images/4.jpg" alt="Half transparent black computer case" /></a>
							<p>Model Name</p>
						</li>
						<li>
							<a title="Details" href="#"><img src="css/images/5.jpg" alt="Compyter case with three extra fans and blue lights" /></a>
							<p>Model Name</p>
						</li>
						<li>
							<a title="Details" href="#"><img src="css/images/1.jpg" alt="Silver half transparent with blue lights computer case" /></a>
							<p>Model Name</p>
						</li>
						<li>
							<a title="Details" href="#"><img src="css/images/2.jpg" alt="Solid brown computer case" /></a>
							<p>Model Name</p>
						</li>
						<li>
							<a title="Details" href="#"><img src="css/images/3.jpg" alt="Computer case with a fan on the side and blue lights" /></a>
							<p>Model Name</p>
						</li>
						<li>
							<a title="Details" href="#"><img src="css/images/4.jpg" alt="Half transparent black computer case" /></a>
							<p>Model Name</p>
						</li>
						<li>
							<a title="Details" href="#"><img src="css/images/5.jpg" alt="Computer case with three extra fans and blue lights" /></a>
							<p>Model Name</p>
						</li>										
					</ul>
				</div>
			</div>
			<!-- END Featured Products -->			
		</div>
		<!-- END Main -->
</body>
</html>